<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光纤生产产线看板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 0.9rem;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 0;
            margin-bottom: 20px;
        }
        .filter-section {
            background: white;
            border-radius: 10px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .filter-section .form-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #6c757d;
        }
        .filter-section .form-select-sm {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
        .table-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .table-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            font-size: 1rem;
        }
        .table-title i {
            margin-right: 10px;
            color: #667eea;
        }
        .progress-bar {
            height: 8px;
            border-radius: 4px;
        }
        .quality-indicator {
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 500;
        }
        .quality-excellent { background-color: #d4edda; color: #155724; }
        .quality-good { background-color: #d1ecf1; color: #0c5460; }
        .quality-warning { background-color: #fff3cd; color: #856404; }
        .quality-poor { background-color: #f8d7da; color: #721c24; }
        .status-badge {
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 500;
        }
        .status-running { background-color: #d4edda; color: #155724; }
        .status-completed { background-color: #cce5ff; color: #004085; }
        .status-paused { background-color: #fff3cd; color: #856404; }
        .metric-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            margin-bottom: 20px;
        }
        .metric-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .metric-label {
            font-size: 14px;
            opacity: 0.9;
        }
        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
            max-height: 200px;
            overflow-y: auto;
        }
        .table th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
        }
        .table td {
            vertical-align: middle;
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
        }
        .refresh-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-1"><i class="bi bi-display"></i> 光纤生产产线看板</h2>
                    <p class="mb-0 small">实时监控生产进度与品质指标</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="d-flex justify-content-end align-items-center">
                        <span class="me-3"><i class="bi bi-clock"></i> <span id="current-time"></span></span>
                        <span class="me-3" id="connection-status" style="font-size: 12px;">
                            <i class="bi bi-circle-fill text-warning"></i> 连接中...
                        </span>
                        <button class="refresh-btn" onclick="refreshData()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 筛选器 -->
        <div class="filter-section">
            <div class="row align-items-end">
                <div class="col-md-2">
                    <label for="factory-select" class="form-label small mb-1">工厂</label>
                    <select class="form-select form-select-sm" id="factory-select" onchange="filterData()">
                        <option value="">全部工厂</option>
                        <option value="factory1">工厂A</option>
                        <option value="factory2">工厂B</option>
                        <option value="factory3">工厂C</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="workshop-select" class="form-label small mb-1">车间</label>
                    <select class="form-select form-select-sm" id="workshop-select" onchange="filterData()">
                        <option value="">全部车间</option>
                        <option value="workshop1">车间1</option>
                        <option value="workshop2">车间2</option>
                        <option value="workshop3">车间3</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="line-select" class="form-label small mb-1">产线</label>
                    <select class="form-select form-select-sm" id="line-select" onchange="filterData()">
                        <option value="">全部产线</option>
                        <option value="line1">产线1</option>
                        <option value="line2">产线2</option>
                        <option value="line3">产线3</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status-select" class="form-label small mb-1">状态</label>
                    <select class="form-select form-select-sm" id="status-select" onchange="filterData()">
                        <option value="">全部状态</option>
                        <option value="running">生产中</option>
                        <option value="completed">已完成</option>
                        <option value="paused">暂停</option>
                    </select>
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
                        <i class="bi bi-x-circle"></i> 清除筛选
                    </button>
                </div>
            </div>
        </div>



        <!-- 进度表格 -->
        <div class="table-card">
            <div class="table-title">
                <i class="bi bi-list-task"></i>
                生产进度表
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-sm" id="progress-table">
                    <thead>
                        <tr>
                            <th>工单编号</th>
                            <th>投放/完成</th>
                            <th>良率</th>
                            <th>不良/报废</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="progress-tbody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 品质表格 -->
        <div class="table-card">
            <div class="table-title">
                <i class="bi bi-graph-up"></i>
                品质指标表
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-sm" id="quality-table">
                    <thead>
                        <tr>
                            <th>工单编号</th>
                            <th>剥纤</th>
                            <th>干涉</th>
                            <th>端检</th>
                            <th>插回损</th>
                            <th>极性</th>
                            <th>综合</th>
                        </tr>
                    </thead>
                    <tbody id="quality-tbody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 人机料法环表格 -->
        <div class="table-card">
            <div class="table-title">
                <i class="bi bi-gear-wide-connected"></i>
                人机料法环管理表
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-sm" id="management-table">
                    <thead>
                        <tr>
                            <th>工序</th>
                            <th>人员</th>
                            <th>设备</th>
                            <th>文件</th>
                            <th>温度/湿度</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="management-tbody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
